<template>
  <div class="center-wrapper">
    <div class="center-container" v-if="!defaultStatus">
      <PersonHead :tabs="tabs" @tabClick="handleTabClick" />
      <div>
        <component :is="currentTabComp" @change="handleChange" :page="currentPage" :pageSize="pageSize" @update-total="updateTotal" />
      </div>
    </div>
    <div v-if="defaultStatus">
      <LinkComp :currentWordsItem="currentWordsItem" @back="handleBack" />
    </div>
    <div class="pagination">
      <Pagination 
        :total="total" 
        :current-page="currentPage" 
        :page-size="pageSize" 
        @current-change="handlePageChange" 
        @size-change="handleSizeChange" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import PersonHead from "@/components/PersonHead";
import LinkComp from "@/components/LinkComp";
import Pagination from "@/components/Pagination";
import DoingExercises from "./DoingExercises";

const currentTabComp = ref(null);
const paginationHideList = ref([]);
const defaultStatus = ref(false);
const currentTabType = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const currentWordsItem = ref('');
const tabs = ref([
  {
    label: "词汇",
    type: "doingExercises",
  },
]);

const handleChange = (item) => {  
  console.log(item, 'itemitemitemitem')
  currentWordsItem.value = item
  defaultStatus.value = true;
};

const handleBack = () => {
  defaultStatus.value = false;
};

const handleTabClick = ({ item: { type } }) => {
  currentTabType.value = type;
  paginationHideList.value = [type];
  const componentKeys = {
    doingExercises: DoingExercises,
  };
  currentTabComp.value = componentKeys[type] || DoingExercises;
  // Reset pagination when switching tabs
  currentPage.value = 1;
};

const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1; // Reset to first page when changing page size
};

const updateTotal = (newTotal) => {
  total.value = newTotal;
};

// Initialize with the first tab
onMounted(() => {
  handleTabClick({ item: tabs.value[0] });
});
</script>

<style scoped lang="scss">
.center-wrapper {
  display: flex;
  flex-direction: column;
}

.pagination {
  margin-bottom: 15px !important;
}
</style>
